<template>
  <div class="albumList">
    <div  v-if="albumList.album!=undefined">
      <div class="cover">
        <div class="cover-body">
          <img class="cover-pic" :src="'https://static.missevan.com/coversmini/'+albumList.album.cover_image" alt="">
          <div class="cover-detail">
            <span class="cover-title">{{albumList.album.title}}</span>
            <div class="cover-username">
              <img src="https://static.missevan.com/web_app/lazy_load.png" alt="">
              <span>{{albumList.album.username}}</span>
            </div>
          </div>
        </div>
        <div class="cover-bg" :style="{backgroundImage:'url('+'https://static.missevan.com/coversmini/201705/24/feb87cfd0434ba497a4fea73ddc11964162137.png'+')'}"></div>
      </div>
      <div class="soundList">
        <SoundItem
          v-for="item in albumList.sounds"
          :key="item.id"
          :item="item"
        ></SoundItem>
      </div>
    </div>
    <ThumbnailLoading v-else></ThumbnailLoading>
    <slot></slot>
  </div>
</template>

<script>
import SoundItem from "components/albumList/SoundItem"
import ThumbnailLoading from "components/public/ThumbnailLoading"
import { get } from "util/http"
export default {
  components:{
    SoundItem,
    ThumbnailLoading
  },
  data(){
    return{
      albumList:{}
    }
  },
  async mounted(){
    let result=await get({
      url:"/ajax/sound/soundalllist",
      params:{
        albumid:this.$route.params.id
      }
    })
    this.albumList=result.info
  }
}
</script>

<style lang="stylus" scoped>
.albumList
  width 100%
  min-height calc(100vh - 0.4rem)
  display flex
  flex-direction column
  .cover
    height 1.5rem
    position relative
    background-color rgba(0,0,0,.5)
    overflow hidden
    .cover-body
      display flex
      justify-content space-around
      align-items center
      position absolute
      padding .1rem
      left 0
      right 0
      top 0
      bottom 0
      z-index 1
      .cover-pic
        width 1.1rem
        display block
        height 1.1rem
      .cover-detail
      
        height 1.1rem
        width calc(100% - 1.3rem)
        color #ffffff
        display flex
        flex-direction column
        justify-content space-between
        .cover-title
          width calc(100% - 0.1rem)
          height .5rem
          word-break break-all
          text-overflow ellipsis 
          overflow hidden
          display -webkit-box
          -webkit-box-orient vertical
          -webkit-line-clamp 2
          line-height .25rem
          margin-left .1rem
          font-size .16rem
        .cover-username
          position relative
          width cacl(100% - 0.1rem)
          color #ffffff
          margin .05rem
          line-height .3rem
          height .3rem
          >img 
            width .25rem
            height .25rem
            display block
            position absolute
            left 0.02rem
            margin 0.02rem
            border-radius 50%
            line-height .3rem
          >span 
            margin-left .4rem
            font-size .16rem
            width calc(100% - 0.4rem)
            white-space nowrap
            text-overflow ellipsis 
            overflow hidden
    .cover-bg
      filter blur(.2rem)
      position absolute
      left -0.2rem
      right -0.2rem
      top -0.2rem
      bottom -0.2rem
      z-index 0
      background-position 50%
      background-size 100%
      background-repeat no-repeat
</style>